@extends('Admin.layout.layout')
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>属性列表</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <a href="" class="btn btn-sm btn-success "><i class="fa fa-refresh"></i> 刷新</a>
                                <button type="button" class="btn btn-sm btn-primary fr"> 搜索</button>
                                <div class="input-group fr10">
                                    <input type="text" placeholder="属性值" class="input-sm form-control">
                                </div>
                                <a class="btn btn-sm btn-primary fr10"  data-toggle="modal" data-target="#addModal">新增</a>
                            </div>
                        </div>
                        <table class="table table-striped table-bordered table-hover dataTable" id="editable">
                            <thead>
                                <tr>
                                    <th width="15">
                                        <input type="checkbox" class="checkall" name="selectall" />
                                    </th>
                                    <th>ID</th>
                                    <th class="center">属性名</th>
                                    <th class="center">展开</th>
                                    <th class="center">排序</th>
                                    <th class="center">备注</th>
                                    <th class="center">创建时间</th>
                                    <th class="center">更新时间</th>
                                    <th class="center">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="no-records-found center"><td colspan="9">没有找到匹配的记录</td></tr>
                                <tr>
                                    <th>
                                        <input type="checkbox" class="checkall" name="checkBox" />
                                    </th>
                                    <td>11111</td>
                                    <td class="center">供电方式</td>
                                    <td class="center">
                                        <div class="btn-group">
                                            <button  class="btn btn-default btn-xs dropdown-toggle btn-value" data-id="2"   data-toggle="modal" data-target="#valueModal">属性值
                                                <span class="caret"></span>
                                            </button>
                                        </div>
                                    </td>
                                    <td class="center">0</td>
                                    <td class="center">--</td>
                                    <td class="center">2018-12-12 12:10:10</td>
                                    <td class="center">2018-12-12 12:10:10</td>
                                    <td class="center">
                                        <a class="btn-xs btn-primary "  data-id="1"   data-toggle="modal" data-target="#editModal">编辑</a>
                                        <a class="btn-xs btn-danger del" data-id="1">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <input type="checkbox" class="checkall" name="checkBox" />
                                    </th>
                                    <td>11111</td>
                                    <td class="center">供电方式</td>
                                    <td class="center">
                                        <div class="btn-group">
                                            <button  class="btn btn-default btn-xs dropdown-toggle btn-value" data-id="2"   data-toggle="modal" data-target="#valueModal">属性值
                                                <span class="caret"></span>
                                            </button>
                                        </div>
                                    </td>
                                    <td class="center">0</td>
                                    <td class="center">--</td>
                                    <td class="center">2018-12-12 12:10:10</td>
                                    <td class="center">2018-12-12 12:10:10</td>
                                    <td class="center">
                                        <a class="btn-xs btn-primary "  data-id="2"   data-toggle="modal" data-target="#editModal">编辑</a>
                                        <a class="btn-xs btn-danger del" data-id="2">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="dataTables_paginate paging_simple_numbers" id="editable_paginate">
                                    <ul class="pagination">
                                        <li class="paginate_button previous" aria-controls="editable" tabindex="0" id="editable_previous">
                                            <a href="#">上一页</a>
                                        </li>
                                        <li class="paginate_button " aria-controls="editable" tabindex="0">
                                            <a href="#">1</a>
                                        </li>
                                        <li class="paginate_button " aria-controls="editable" tabindex="0">
                                            <a href="#">2</a>
                                        </li>
                                        <li class="paginate_button " aria-controls="editable" tabindex="0">
                                            <a href="#">3</a>
                                        </li>
                                        <li class="paginate_button active" aria-controls="editable" tabindex="0">
                                            <a href="#">4</a>
                                        </li>
                                        <li class="paginate_button " aria-controls="editable" tabindex="0">
                                            <a href="#">5</a>
                                        </li>
                                        <li class="paginate_button " aria-controls="editable" tabindex="0">
                                            <a href="#">6</a>
                                        </li>
                                        <li class="paginate_button next" aria-controls="editable" tabindex="0" id="editable_next">
                                            <a href="#">下一页</a>
                                        </li>
                                        <li>&nbsp;&nbsp;共437页，到第&nbsp;&nbsp;<input type="text" class="g-input">&nbsp;页&nbsp;<input type="button" onclick="" value="确定" class="btn btn-sm btn-primary"></input></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="addModalLabel">
                    创建属性
                </h4>
            </div>
            <form class="form-horizontal m-t" id="addForm">
            <div class="modal-body">
                <div class="form-group">
                    <label class="col-sm-3 control-label">属性名：</label>
                    <div class="col-sm-8">
                        <input id="addname" name="addname" class="form-control" type="text" placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">排序：</label>
                    <div class="col-sm-2">
                        <input id="addsort" name="addsort" class="form-control" type="text" placeholder="" value="0">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">备注：</label>
                    <div class="col-sm-8">
                        <textarea  id="addremark" name="addremark" class="form-control" rows="3" placeholder="备注"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" id="add_submit">
                    确定
                </button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal" >取消
                </button>
            </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="editModalLabel">
                    修改属性
                </h4>
            </div>
            <form class="form-horizontal m-t" id="editForm">
            <div class="modal-body">
                <div class="form-group">
                    <label class="col-sm-3 control-label">属性名：</label>
                    <div class="col-sm-8">
                        <input id="editname" name="editname" class="form-control" type="text" placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">排序：</label>
                    <div class="col-sm-2">
                        <input id="editsort" name="editsort" class="form-control" type="text" placeholder="" value="0">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">备注：</label>
                    <div class="col-sm-8">
                        <textarea  id="editremark" name="editremark" class="form-control" rows="3" placeholder="备注"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" id="edit_submit">
                    确定
                </button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal" >取消
                </button>
            </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="valueModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="addModalLabel">
                    属性值
                </h4>
            </div>
            <form class="form-horizontal m-t" >
            <div class="modal-body valuelist" style="height: 400px; overflow:auto; ">
                <div class="form-group">
                    <label class="col-sm-3 control-label">1111</label>
                    <div class="col-sm-8">
                        <p class="form-control-static">属性值</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">1111</label>
                    <div class="col-sm-8">
                        <p class="form-control-static">属性值</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">1111</label>
                    <div class="col-sm-8">
                        <p class="form-control-static">属性值</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">1111</label>
                    <div class="col-sm-8">
                        <p class="form-control-static">属性值</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">1111</label>
                    <div class="col-sm-8">
                        <p class="form-control-static">属性值</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">1111</label>
                    <div class="col-sm-8">
                        <p class="form-control-static">属性值</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">1111</label>
                    <div class="col-sm-8">
                        <p class="form-control-static">属性值</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">1111</label>
                    <div class="col-sm-8">
                        <p class="form-control-static">属性值</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">1111</label>
                    <div class="col-sm-8">
                        <p class="form-control-static">属性值</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">1111</label>
                    <div class="col-sm-8">
                        <p class="form-control-static">属性值</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">1111</label>
                    <div class="col-sm-8">
                        <p class="form-control-static">属性值</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">1111</label>
                    <div class="col-sm-8">
                        <p class="form-control-static">属性值</p>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </div>
</div>
    <script src="{{asset('js/plugins/validate/jquery.validate.min.js')}}"></script>
    <script src="{{asset('js/plugins/validate/messages_zh.min.js')}}"></script>
    <script src="{{asset('js/plugins/layer/layer.min.js')}}"></script>
    <script>
        $.validator.setDefaults({
            highlight: function (element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                element.closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            errorElement: "span",
            errorPlacement: function (error, element) {
                if (element.is(":radio") || element.is(":checkbox")) {
                    error.appendTo(element.parent().parent().parent());
                } else {
                    error.appendTo(element.parent());
                }
            },
            errorClass: "help-block m-b-none",
            validClass: "help-block m-b-none"
        });
        $(document).ready(function () {
            //查看属性值
            $('#valueModal').on('show.bs.modal', function (e) {
                var id = $(e.relatedTarget).attr("data-id");
                var html = '';
                $.ajax({
                    url : '',
                    type : 'post',
                    contentType : "json",
                    data : {},
                    success : function(data) {
                        if (0 == data.code) {
                            for(var i in data.data){
                                html+='<div class="form-group"><label class="col-sm-3 control-label">'+data.data[i].a+'</label><div class="col-sm-8"><p class="form-control-static">'+data.data[i].b+'</p></div> </div>';
                            }
                            $('.valuelist').html(html)
                        }
                    }
                });

            })
            var edit_id = 0;//修改属性的id
            // validate signup form on keyup and submit
            var icon = "<i class='fa fa-times-circle'></i> ";

            //新增
            $("#addForm").validate({
                rules: {
                    addname: "required",
                    addsort: "required",
                    addremark: "required"
                },
                messages: {
                    addname: icon + "请输入属性名",
                    addsort: icon + "请输入排序",
                    addremark: icon + "请输入备注"
                },
                submitHandler:function(form){
                    var addname = $('#addname').val();
                    var addattributevalue = $('#addattributevalue').val();
                    var addsort = $('#addsort').val();
                    var addremark = $('#addremark').val();
                    $.ajax({
                        url : '',
                        type : 'post',
                        contentType : "json",
                        data : {},
                        success : function(data) {
                            if (0 == data.code) {
                                layer.alert(data.message, {
                                    icon: 1
                                }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.alert(data.message, {
                                    icon: 2
                                });
                            }
                        }
                    });
                }
            });

            $('#editModal').on('show.bs.modal', function (e) {
                edit_id = $(e.relatedTarget).attr("data-id");//编辑时属性的id
            })
            //编辑
            $("#editForm").validate({
                rules: {
                    editname: "required",
                    editsort: "required",
                    editremark: "required"
                },
                messages: {
                    editname: icon + "请输入属性名",
                    editsort: icon + "请输入排序",
                    editremark: icon + "请输入备注"
                },
                submitHandler:function(form){
                    var editname = $('#editname').val();
                    var editsort = $('#editsort').val();
                    var editremark = $('#editremark').val();
                    $.ajax({
                        url : '',
                        type : 'post',
                        contentType : "json",
                        data : {},
                        success : function(data) {
                            if (0 == data.code) {
                                layer.alert(data.message, {
                                    icon: 1
                                }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.alert(data.message, {
                                    icon: 2
                                });
                            }
                        }
                    });
                }
            });
            //删除
            $('.del').click(function(){
                var id = $(this).attr('data-id');
                layer.confirm('是否删除？', {
                    btn: ['确认', '取消'] //可以无限个按钮
                }, function (index) {
                    $.ajax({
                        url: '',
                        type: 'GET',
                        dataType: 'json',
                        data: {'id': id},
                        success: function (data) {
                            if (0 == data.code) {
                                layer.alert(data.message, {
                                    icon: 1
                                }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.alert(data.message, {
                                    icon: 2
                                });
                            }
                        }
                    });
                }, function (index, layero) {
                    layer.close(index);
                });
            })
        });
    </script>
@endsection
